<template>
	<view>
		<view class="share">
			<view :class="{'box': isShow}" @click="closePopUp"></view>
			<view class="pop-upWindow" :class="{'show': isShow}">
			<view class="popoverHead">
				<view class="popoverHead-cancel" v-if="popUpType=='schedule' || popUpType=='Orelevance'||popUpType=='KRrelevance'||popUpType=='viewOorientation'||popUpType=='viewKRorientation'"></view>
				<view class="popoverHead-cancel" @click="closePopUp" v-else>取消</view>
				<!-- <view class="establish" @click="establishTask" v-if="popUpType=='KRrelevance' || popUpType=='Orelevance'">
					<image src="@/static/image/target/plus_icon.png"></image>创建新任务
				</view> -->
				<view class="popoverHead-title">
					{{[
						popUpType=='schedule'?'进度记录':''|| 
						popUpType=='orientation'?'对齐目标':'' || 
						popUpType=='KRorientation'?'对齐目标':'' || 
						popUpType=='Orelevance'?'关联内容':''||
						popUpType=='KRrelevance'?'关联内容':'' || 
						popUpType=='updateResult'?'更新成果完成度':''||
						popUpType=='weight'?'调整权重':'' ||
						popUpType=='viewOorientation'?'查看对齐':'' ||
						popUpType=='viewKRorientation'?'查看对齐':''
					]}}
				</view>
				<view class="popoverHead-confirm" @click="closePopUp" v-if="popUpType=='schedule'|| popUpType=='Orelevance'||popUpType=='KRrelevance'||popUpType=='viewOorientation'">
					<image class="close_icon" src="@/static/image/close_icon.png"></image>
				</view>
				<view v-else>
					<view v-if="popUpType=='orientation'" class="popoverHead-confirm" @click="orientationConfirm">确定</view>
					<view v-if="popUpType=='KRorientation'" class="popoverHead-confirm" @click="orientationConfirm">确定</view>
					<view v-if="popUpType=='updateResult'" class="popoverHead-confirm" @click="updateCompletion">确定</view>
					<view v-if="popUpType=='weight'" class="popoverHead-confirm" @click="weightconfirm">确定</view>
				</view>
			</view>
				<!-- 进度记录 -->
				<view v-if="popUpType=='schedule'">
					<!-- 进度记录 -->
					<scroll-view scroll-y style="height: 905rpx;">
					<view class="progressRecord">
						<view class="progressRecord-list" v-for="(item,index) in recordsList" :key="index">
							<view class="progressRecord-list-herName">
								<view class="progressRecord-list-herName-text" v-if="userData.employeeName">{{userData.employeeName.substr(0,1)}}</view>
							</view>
							<view class="progressRecord-list-info">
								<view class="progressRecord-list-info-name">
									<view>{{userData.employeeName}}</view>
									<view style="font-size: 24rpx;">{{item.createTime}}</view>
								</view>
								<view class="progressRecord-list-info-explain">{{item.content}}</view>
							</view>
						</view>
					</view>
					</scroll-view>
				</view>	
				
				<!-- 查看对齐目标 -->
				<view v-if="popUpType=='viewOorientation' || popUpType=='viewKRorientation'">
					<view class="alignList" v-if="popUpType=='viewOorientation'">
						<view class="alignList-item">
							<view class="alignList-item-name" style="display: flex;justify-content: space-between;">
								<view class="viewOrientation">
									<view class="alignList-item-name-text">
										{{OalignDetails.content}}
									</view>
								</view>
								<view class="viewOrientation-cancel">
									<text class="viewOrientation-cancel-text" @click="OcancelAlign()">取消对齐</text>
								</view>
							</view>
						</view>
					</view>
					<view class="alignList" v-else>
						<view class="alignList-item" v-for="item,index in KRalignDetails" :key="item.id">
							<view class="alignList-item-name" style="display: flex;justify-content: space-between;">
								<view class="viewOrientation">
									<view class="alignList-item-name-text">
										{{item.objectivesName}}
									</view>
								</view>
								<view class="viewOrientation-cancel">
									<text class="viewOrientation-cancel-text" @click="KRcancelAlign(item)">取消对齐</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 对齐目标 -->
				<view v-if="popUpType=='orientation' || popUpType=='KRorientation'">
						<view class="alignTitle-menu">
							<view>
								<picker mode="date" :value="startDate"  @change="setartDateChange">
									<view class="uni-input">{{startDate?startDate:'选择开始时间'}}</view>
								</picker>
							</view>
							<view>
								<picker mode="date" :value="endDate" :start="startDate" @change="endDateChange">
									<view class="uni-input">{{endDate?endDate:'选择结束时间'}}</view>
								</picker>
							</view>
							<view @click="staffPopUp">{{addUserName ? addUserName : '选择人员'}}</view>
						</view>	
					<scroll-view scroll-y style="height: 820rpx;">
						<view class="alignList">
							<view class="alignList-item" v-for="item,index in orientationList" :key="index">
								<view class="alignList-item-name">
									<view class="alignList-item-name-index">
										<view class="alignList-item-name-index-number">{{index+1}}</view>
									</view>
									<view class="alignList-item-name-text">
										{{item.userName}}
									</view>
								</view>
								<view class="alignList-item-content">
									<radio-group @change="radioChange" v-if="popUpType=='orientation'">
										<label class="uni-list-cell uni-list-cell-pd" v-for="(val, idx) in item.krList" :key="val.id">
											<view>
												<radio :value="val.id" :checked="val.checkbox"  color='#4ea5ff'/>
											</view>
											<view><text style="margin: 0 10rpx;color: #a5a5a5;">成果{{idx+1}}</text>{{val.content}}</view>
										</label>
									</radio-group>
									<checkbox-group v-else  @change="multiple">
										<label v-for="(val, idx) in item.objectivesList" :key="val.id" style="display: flex;">
											<checkbox color="#3e76ea" :value="val.id" :checked="val.checkbox"/>
											<view>{{val.objectivesName}}</view>
										</label>
									</checkbox-group>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			
				<!-- 关联任务项目 -->
				<view class="contextual" v-if="popUpType=='Orelevance'||popUpType=='KRrelevance'">
					<view class="contextual-select">
						<view :class="[contextualIndex==0?'contextual-select-active':'contextual-select-text']" @click="relevanceTab('task')">任务</view>
						<view :class="[contextualIndex==1?'contextual-select-active':'contextual-select-text']" @click="relevanceTab('project')">项目</view>
					</view>
					<view class="contextual-input">
						<input v-model="search" placeholder="请输入编号、名称" />
					</view>
					<scroll-view scroll-y style="height: 720rpx;">
					<view class="contextual-taskList" v-show="contextualIndex==0">
								
						<view class="contextual-taskList-item" v-for="item,index in taskList" :key="item.id">
							<view class="contextual-taskList-item-taskName">
								<view class="contextual-taskList-item-taskName-left">
									<radio-group @change="relevanceCheckbox(item)"><radio :value="item.id" :checked="item.select"  color='#4ea5ff'/></radio-group>
									<view class="contextual-taskList-item-taskName-left-tag">
										{{item.taskNo}}
									</view>
									<view class="contextual-taskList-item-taskName-left-text">{{item.taskName}}</view>
								</view>
								<view class="contextual-taskList-item-taskName-right">
									<view class="contextual-taskList-item-taskName-right-status"
									:class="[
										item.executeStatus == 0?'':'' ||
										item.executeStatus == 1?'underway':'' ||
										item.executeStatus == 2?'suspend':'' ||
										item.executeStatus == 3?'accomplishSubmission':'' ||
										item.executeStatus == 4?'abnormalSubmission':'' ||
										item.executeStatus == 5?'finish':'' ||
										item.executeStatus == 6?'abnormalSubmission':''
									]">
										{{[
											item.executeStatus == 0?'未开始':'' ||
											item.executeStatus == 1?'进行中':'' ||
											item.executeStatus == 2?'暂停':'' ||
											item.executeStatus == 3?'完成提报中':'' ||
											item.executeStatus == 4?'异常提报中':'' ||
											item.executeStatus == 5?'完成':'' ||
											item.executeStatus == 6?'异常完成':''
										]}}
									</view>
								</view>
							</view>	
							<view class="contextual-taskList-item-principal">
								<view>负责人：{{item.leaderName}}</view>
							</view>
						</view>
						<view class="contextual-taskList-btn">
							<button type="primary" class="contextual-taskList-btn-confirm" @click="affirmBtn('task')">确定</button>
						</view>
					</view>
					
					<view class="contextual-taskList" v-show="contextualIndex==1">
						<view class="contextual-taskList-item" v-for="item,index in projectList" :key="item.id">
							<view class="contextual-taskList-item-taskName">
								<view class="contextual-taskList-item-taskName-left">
									<radio-group @change="relevanceCheckbox(item)"><radio :value="item.id" :checked="item.select"  color='#4ea5ff'/></radio-group>
									<view class="contextual-taskList-item-taskName-left-tag">
										{{item.projectNo}}
									</view>
									<view class="contextual-taskList-item-taskName-left-text">{{item.projectName}}</view>
								</view>
								<view class="contextual-taskList-item-taskName-right">
									<view class="contextual-taskList-item-taskName-right-status"
									:class="[
										item.executeStatus == 0?'':'' ||
										item.executeStatus == 1?'underway':'' ||
										item.executeStatus == 2?'suspend':'' ||
										item.executeStatus == 3?'accomplishSubmission':'' ||
										item.executeStatus == 4?'abnormalSubmission':'' ||
										item.executeStatus == 5?'finish':'' ||
										item.executeStatus == 6?'abnormalSubmission':''
									]">
										{{[
											item.executeStatus == 0?'未开始':'' ||
											item.executeStatus == 1?'进行中':'' ||
											item.executeStatus == 2?'暂停':'' ||
											item.executeStatus == 3?'完成提报中':'' ||
											item.executeStatus == 4?'异常提报中':'' ||
											item.executeStatus == 5?'完成':'' ||
											item.executeStatus == 6?'异常完成':''
										]}}
									</view>
								</view>
							</view>	
							<view class="contextual-taskList-item-principal">
								<view>负责人：{{item.leaderName}}</view>
							</view>
						</view>
						<view class="contextual-taskList-btn">
							<button type="primary" class="contextual-taskList-btn-confirm" @click="affirmBtn('project')">确定</button>
						</view>
					</view>
					<view>
					</view>
					</scroll-view>
				</view>
			
					
				<!-- 更新成果完成度  -->
				<view class="createTarget-select" v-if="popUpType=='updateResult'">
					<view class="createTarget-select-item">
						<view>完成度</view>
						<view class="createTarget-select-item-finishInput">
							<input v-model="KRschedule.progressValue" type="text" placeholder="请输入完成度" />%
						</view>
					</view>
					<view class="createTarget-select-item" @click="iselectState">
						<view>状态</view>
						<view class="createTarget-select-item-status">
							<text v-if="!selectResult" class="placeholder">请选择状态</text>
							<text v-else style="font-weight: 700;">{{selectResult}}</text>
							<image src="@/static/image/more_right_icon.png"></image>
						</view>
					</view>
					<view class="createTarget-select-input">
						<view>更新说明</view>
						<textarea class="createTarget-select-input-textarea" @input='updateExplanation' :value="KRschedule.explanation" placeholder="请保持进度更新,相关同事会关注哦!" />
					</view>
				</view>
			
			
				<view class="weightList" v-if="popUpType=='weight'">
					<view class="weightList-item">
						<view class="weightList-item-name">
							<view class="weightList-item-name-tag">成果{{KRitemData.sort}}</view>
							<view class="weightList-item-name-text">{{KRitemData.content}}</view>
						</view>
						<view class="weightList-item-ratio">
							<input v-model="KRitemData.weightRatio" type="text"/>%
						</view>
					</view>
				</view>
			
			</view>
			
		</view>
		
		
		<!-- 选择人员 -->
		<view class="share">
			<view :class="{'box': staffShow}" @click="closeStaffPopUp"></view>
			<view class="pop-upWindow" :class="{'show': staffShow}">
				<view class="popoverHead">
					<view class="popoverHead-cancel" @click="closeStaffPopUp">取消</view>
					<view class="popoverHead-title">选择人员</view>
					<view class="popoverHead-confirm" @click="confirmStaff">确定</view>
				</view>
				<scroll-view scroll-y>
					<view>
						<view class="contextual-input">
							<input v-model="personnelInput" placeholder="搜索员工" />
						</view>
						<view class="staffList">
							<view v-for="(item,index) in staffList" :key="item.userId" @click="selectClick(item)">
								<view class="staffList-item">
									<view class="staffList-item-info">
										<view class="staffList-item-info-surname" v-if="item.userName">{{item.userName.substr(0,1)}}</view>
										<view class="staffList-item-info-name">{{item.userName}}</view>
									</view>
									<view class="staffList-item-icon" v-if="item.select">
										<icon type="success_no_circle" color="#3e76ea" size="26"/>
									</view>
								</view>
							</view>
							<view v-if="popUpType=='staff'" class="staffList-selectedStaff" @click="addStaffListClick">
								已选择{{addstaffList.length}}项
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		<!-- 已添加人员 -->
		<view class="share">
			<view :class="{'box': addedStaffShow}" @click="closeAddStaffPopUp"></view>
			<view class="pop-upWindow" :class="{'show': addedStaffShow}">
				<view class="popoverHead">
					<view class="popoverHead-cancel"></view>
					<view class="popoverHead-title">已选择人员</view>
					<view class="popoverHead-confirm" @click="closeAddStaffPopUp">
						<image class="close_icon" src="@/static/image/close_icon.png"></image>
					</view>
				</view>
				<scroll-view scroll-y>
						<view class="addStaffListBox">
							<view class="addStaffListBox-item" v-for="(val,index) in addstaffList" :key="val.employeeId">
								<view>{{val.userName}}</view>
								<view style="color: red;" @click="removeStaff(val,index)">移除</view>
							</view>
						</view>				
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		props:{
			popUpType:{
				type:String,
				default:null,
			},
			isShow:{
				type:Boolean,
				default:false,
			},
			selectData: {
				type:Object,
				default:{},
			},
			KRitemData: {
				type:Object,
				default:{},
			},
			userData: {
				type:Object,
				default:{},
			}
		},
		data() {
			return {
				recordsList:[], // 进度记录
				
				// O对齐目标
				OalignDetails:{}, // O对齐详情
				KRalignDetails:[], // KR对齐详情
				startDate:'',
				endDate:'',
				orientationList:[], // 对齐目标数据
				orientationData:{}, // 选择对齐目标的id
				addUserName:'', // 选择人员的数据
				// 人员
				staffList:[], // 人员列表
				personnelInput:'',
				staffShow:false,
				addstaffList:[],
				addedStaffShow:false,
				
				// 关联
				search:'',
				contextualIndex:0,  // 关联内容的tab
				taskList:[], // 关联任务列表
				projectList:[], // 关联项目列表
				relevanceTaskData:{}, // 关联任务请求的参数
				relevanceProjectkData:{},// 关联项目请求的参数
				
				// 更新成果完成度
				selectResult:'',
				selectStateList: ['正常', '有风险','已逾期'],// 信心指弹出框选择框
				KRschedule:{
					explanation:'',
					progressValue:'',
					progressStatus:null
				},
				
				flg:false
			}
		},
		watch: {
		  popUpType: {
		    deep: true,
		    handler(val) {
		      switch (val) {
		      	case "schedule":
		      		this.getScheduleList()
		            break;
				case "orientation":
					this.getOrientationList('O')
				    break;
				case "KRorientation":
					this.getOrientationList('KR')
					break;
				case "Orelevance":
					this.contextualIndex = 0
					this.relevanceRequest('task')
				    break;
				case "KRrelevance":
					this.relevanceRequest('task')
				    break;
				case "updateResult":
					this.$set(this.KRschedule,'explanation',this.KRitemData.explanation)
					this.$set(this.KRschedule,'progressValue',this.KRitemData.progressValue)
					if(this.KRitemData.progressStatus){
						this.KRschedule.progressStatus = this.KRitemData.progressStatus
						let index = this.KRitemData.progressStatus - 1
						this.selectResult = this.selectStateList[index]
					}else{
						this.selectResult = null
					}
				    break;
				case "staff":
					this.personnelInput = '' 
					if(this.selectData.employeeList){
						this.addstaffList = [...new Set(this.selectData.employeeList)]
					}else{
						this.addstaffList = []
					}
					this.staffPopUp()
				    break;
				case "viewOorientation":  // O对齐详情
				    this.getExamineTarget('O')
				    break;
				case "viewKRorientation": // KR对齐详情
				    this.getExamineTarget('KR')
				    break;
		      	default:
		      }
		    }
		  },
		  // 关联搜索框防抖
		  search(newVal){
		  	if (this.flg) {
		  	  return false
		  	}
		  	this.flg = true
		  	setTimeout(()=> {
		  		if(this.contextualIndex == 0){
		  			this.relevanceRequest('task')
		  		}else{
		  			this.relevanceRequest('project')
		  		}
		  	  this.flg = false
		  	}, 800)
		  },
		  personnelInput(newVal){
		  	if (this.flg) {
		  	  return false
		  	}
		  	this.flg = true
		  	setTimeout(()=> {
		  		this.staffPopUp()
		  	  this.flg = false
		  	}, 800)
		  },
		  // addstaffList(value){
			 //  this.addstaffList = [...new Set(this.selectData.employeeList)]
		  // }
		},
		methods: {
			// 隐藏
			closePopUp(){
				if(this.popUpType == 'KRorientation' || this.popUpType == 'orientation'){
					this.addUserName = ''
					this.startDate = ''
					this.endDate = ''
				}
				this.$emit('closePopUp')
			},
			showHint(title){
				uni.showToast({
					title,
					icon:'none',
					duration: 2000
				});	
			},
			 // 获取进度列表
			getScheduleList(){
				let data = {
					current: 1,
					objectivesId: this.selectData.id,
					size: 1000
				}
				api.getRecord(data).then(res=>{
					if(res.code == 0){
						let { records } = res.data.result
						this.recordsList = records
					}
				})
			},
			
			// 查看对齐目标
			getExamineTarget(type){
				if(type == 'O'){  //查看O对齐详情
					api.ObjectivesDetails({id:this.selectData.id}).then(res=>{
						if(res.code == 0){
							let { result } = res.data
							this.OalignDetails = result
						}
					})
				}else{ // 查看KR对齐详情
					api.krDetails({id:this.KRitemData.id}).then(res=>{
						if(res.code == 0){
							let { result } = res.data
							this.KRalignDetails = result
						}
					})
				}
			},
			OcancelAlign(){ // 取消O对齐
				api.objectivesCancel(this.selectData.id).then(res=>{
					if(res.code == 0){
						this.closePopUp()
					}
				})
			},
			KRcancelAlign(item){ // 取消KR对齐
				let data = {
					id:this.KRitemData.id,
					objectivesId:item.id
				}
				api.krCancel(data).then(res=>{
					if(res.code == 0){
						this.closePopUp()
					}
				})
			},
			
			
			// O对齐目标 
			setartDateChange(e) { // 开始时间
			    this.startDate = e.detail.value
				if(this.endDate && this.popUpType=='orientation'){
					this.getOrientationList('O')
				}
				if(this.endDate && this.popUpType=='KRorientation'){
					this.getOrientationList('KR')
				}
			},		
			endDateChange(e) { // 结束时间
			    this.endDate = e.detail.value
				if(this.startDate && this.popUpType=='orientation'){
					this.getOrientationList('O')
				}
				if(this.startDate && this.popUpType=='KRorientation'){
					this.getOrientationList('KR')
				}
			},
			getOrientationList(type){ // 获取对齐目标列表
			
				let data = {
					userName:this.addUserName?this.addUserName:this.userData.employeeName,
					startTime:this.startDate,
					endTime:this.endDate
				}
				if(type == 'O'){ //O 对齐 
					api.getOrientationList(data).then(res=>{
						if(res.code == 0){
							let { result } = res.data
							result.forEach(res=>{
								res.krList.forEach(val=>{
									this.$set(val,'checkbox', false)
								})
							})
							
							result.forEach(res=>{
								res.krList.forEach(val=>{
									if(val.id == this.selectData.keyResultId){
										val.checkbox = true
									}
								})
							})
							this.orientationList = result
						}
					})
				}else{  //KR 对齐 
					api.objectivesByUserName(data).then(res=>{
						if(res.code == 0){
							res.data.result.forEach(res=>{
								res.objectivesList.forEach(val=>{
									this.$set(val,'checkbox', false)
								})
							})
							this.orientationList = res.data.result
						}
					})
				}
				
			},
			radioChange(evt) { // O选择目标
				this.orientationData.keyResultId = evt.detail.value
			},
			multiple(evt){// KR选择目标
				this.orientationData.objectivesIds = evt.detail.value
			},
			orientationConfirm(){ // 对齐目标确认按钮
				this.startDate =''
				this.endDate = ''
				if(this.popUpType == "orientation"){ 
					this.orientationData.id = this.selectData.id
					if(!this.orientationData.keyResultId){
						return this.showHint('请选择对齐目标')
					}
					api.objectivesToIt(this.orientationData).then(res=>{
						if(res.code==0){
							this.closePopUp()
							this.showHint('设置成功')
						}
					})
				}else{
					if(!this.orientationData.objectivesIds){
						return this.showHint('请选择对齐目标')
					}
					this.orientationData.id = this.KRitemData.id
					api.krToIt(this.orientationData).then(res=>{
						if(res.code==0){
							this.closePopUp()
							this.showHint('设置成功')
						}
					})
				}
				
			},
			closeStaffPopUp(){  // 关闭人员弹窗
				this.staffShow = false
				this.$emit('closeAddStaff')
			},
			staffPopUp(){ // 获取人员列表
				this.staffShow = true
				api.getEmployees({userName:this.personnelInput}).then(res=>{
					if(res.code == 0){
						let { employeeList } = res.data.result
							employeeList.forEach(res=>{
								this.$set(res,'select', false)
							})
							 
							if(this.popUpType == 'staff'&&this.addstaffList){
								employeeList.forEach(item=>{
									this.addstaffList.forEach(val=>{
										if(item.userId == val.employeeId){
											item.select = true
										}
									})
								})
							}
						
						this.staffList = employeeList
					}
				})
			},
			selectClick(item){ // 单选人员按钮
				if(this.popUpType == 'staff'){
					item.select = !item.select
					if(item.select){
						this.addstaffList.push(item)
					}
					if(!item.select){
						var index = this.addstaffList.findIndex((val) => val.employeeId == item.userId)
						this.addstaffList.splice(index,1)
					}
				}else{
					this.addUserName = item.userName
					this.staffList.forEach(res=>{
						res.select = false
					})
					item.select = !item.select
				}
			},
			confirmStaff(){ // 确认选择人员按钮
				this.closeStaffPopUp()
				if(this.popUpType == "staff"){
					let arr = []
					this.addstaffList.forEach(item =>{
						arr.push(item.employeeId?item.employeeId:item.userId)
					})
					this.$emit('redactAffirmStaff',arr)
				}else if(this.popUpType == "orientation"){
					this.getOrientationList('O')
				}else{
					this.getOrientationList('KR')
				}
			},
			addStaffListClick(){ // 添加人员
				this.addedStaffShow = true
			},
			closeAddStaffPopUp(){
				this.addedStaffShow = false
			},
			removeStaff(val,index){
				this.addstaffList.splice(index,1)
				this.staffList.forEach(res=>{
					if(res.userId == val.employeeId){
						res.select = false
					}
				})
			},
			
			
			// 关联
			establishTask(){ // 跳转到创建页面
				uni.switchTab({
				    url: '/pages/initiate/index/index'
				});
			},
			relevanceTab(type){  // 点击tab
				if(type == "task"){
					this.contextualIndex = 0
					if(this.taskList == false){  // 没有数据才去请求
						this.relevanceRequest('task')
					}
				}else{
					this.contextualIndex = 1
					if(this.projectList == false){  // 没有数据才去请求
						this.relevanceRequest('project')
					}
				}
			},
			relevanceRequest(type){  // 关联请求
				let data = {
					type:0,
					search:this.search
				}	
				if(type == 'task'){
					api.getTaskList(data).then(res=>{
						if(res.code == 0){
							let result = res.data.result.slice(0,5)
							
							if(result.length>100){
								let data = result.slice(0,100)
								data.forEach(res=>{
									this.$set(res,'select', false)
								})
								this.taskList = data
							}else{
								result.forEach(res=>{
									this.$set(res,'select', false)
								})
								this.taskList = result
							}
						}else{
							this.closePopUp()
						}
					})				
				}else{
					api.getProjectList(data).then(res=>{
						if(res.code == 0){
							let result = res.data.result.slice(0,5)
							result.forEach(res=>{
								this.$set(res,'select', false)
							})
							this.projectList = result
						}else{
							this.closePopUp()
						}
					})	
				}
			},
			relevanceCheckbox(item){
				this.taskList.forEach(res=>{
					res.select = false
				})
				item.select = !item.select
				if(item.select){
					this.relevanceTaskData.taskId = item.id
					this.relevanceProjectkData.projectId = item.id
				}else{
					this.relevanceTaskData.taskId = ''
					this.relevanceProjectkData.projectId = ''
				}
				
			},
			affirmBtn(type){
				if(this.popUpType == 'Orelevance'){
					this.relevanceTaskData.id = this.selectData.id
					this.relevanceProjectkData.id = this.selectData.id
					if(type == "task"){
						if(this.relevanceTaskData.taskId){
							api.objectivesAssociationTask(this.relevanceTaskData).then(res=>{
								if(res.code == 0){
									this.closePopUp()
									this.search = ''
									this.taskList = []
									this.projectList = []
									this.showHint('关联成功')
								}
							})
						}else{
							this.showHint('请选择关联任务')
						}
					}else{
						if(this.relevanceProjectkData.projectId){
							api.objectivesAssociationProject(this.relevanceProjectkData).then(res=>{
								if(res.code == 0){
									this.closePopUp()
									this.search = ''
									this.taskList = []
									this.projectList = []
									this.showHint('关联成功')
								}
							})
						}else{
							this.showHint('请选择关联任务')
						}
					}
				}else{
					this.relevanceTaskData.id = this.KRitemData.id
					this.relevanceProjectkData.id = this.KRitemData.id	
					if(type == "task"){
						if(this.relevanceTaskData.taskId){
							api.krAssociationTask(this.relevanceTaskData).then(res=>{
								if(res.code == 0){
									this.closePopUp()
									this.search = ''
									this.showHint('关联成功')
								}
							})
						}else{
							this.showHint('请选择关联任务')
						}
					}else{
						if(this.relevanceProjectkData.projectId){
							api.krAssociationProject(this.relevanceProjectkData).then(res=>{
								if(res.code == 0){
									this.closePopUp()
									this.search = ''
									this.showHint('关联成功')
								}
							})
						}else{
							this.showHint('请选择关联项目')
						}
					}
				}
			},
			
			// 更新成果完成度
			iselectState(){
				let that = this;
				uni.showActionSheet({
					itemList: that.selectStateList,
					success: function(res) {
						that.selectResult = that.selectStateList[res.tapIndex]
						that.KRschedule.progressStatus = res.tapIndex + 1
					}
				});
			},
			updateExplanation(e){
				this.KRschedule.explanation = e.detail.value
			},
			updateCompletion(){
				if(!this.KRschedule.progressStatus){
					return this.showHint('请选择状态')
				}
				if(this.KRschedule.progressValue>100){
					return this.showHint('完成度最大值为100')
				}
				this.KRschedule.id = this.KRitemData.id
				api.setProgress(this.KRschedule).then(res=>{
					if(res.code == 0){
						this.showHint('设置成功')
						this.closePopUp()
						this.KRschedule = {}
					}
				})
			},
			
			// 调整权重
			weightconfirm(){
				if(this.KRitemData.weightRatio>100){
					return this.showHint('权重最大值为100')
				}
				
				let data = {
					id: this.KRitemData.id,
					sort: this.KRitemData.sort,
					weightRatio: this.KRitemData.weightRatio,
				}
				
				api.setWeights(data).then(res=>{
					if(res.code == 0){
						this.showHint('设置成功')
						this.closePopUp()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.share {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 200;
		.box {  // 遮罩
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			bottom: 0rpx;
			right: 0rpx;
			background-color: rgba(0, 0, 0, 0.7);
			transition: .3s;
			z-index: 999;
		}
		.show {
			transition: all 0.3s ease;
			transform: translateY(0%) !important;
		}
		
		// 离开分享动画
		.pop-upWindow {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			// height: auto;
			background-color: #fff;
			transition: all 0.3s ease;
			transform: translateY(100%);
			z-index: 1999;
			height: 1000rpx;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
		}
		.popoverHead{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 40rpx;
			border-bottom: 1px solid #eeeeee;
			position: relative;
			.establish{
				position: relative;
				position: absolute;
				bottom: 10rpx;
				left: 25rpx;
				font-size: 26rpx;
				color: #398ef4;
				display: flex;
				align-items: center;
				image{
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
			}
			&-cancel{
				color: #409eff;
			}
			&-title{
				font-weight: 700;
				font-size: 34rpx;
			}
			&-confirm{
				color: #409eff;
				.close_icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
		}
		
		
		// 进度记录
		.progressRecord{
			padding-bottom: 100rpx;
			&-list{
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 0 40rpx;
				
				&-herName{
					margin-right: 20rpx;
					&-text{
						width: 90rpx;
						height: 90rpx;
						border-radius: 45rpx;
						background-color: #f6c255;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 38rpx;
					}
				}
				&-info{
					flex: 1;
					&-name{
						font-size: 30rpx;
						color: #a2a2a2;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 10rpx 0;
					}
				}
			}
			&-list:first-child {
			  margin-top: 20rpx;
			}
		}
		
		
		
		// 对齐目标
		.alignTitle-menu{
			padding: 22rpx 0;
			display: flex;
			align-content: center;
			justify-content: space-around;
			background: #eaeaea;   
		}			
		.alignList{
			&-item{
				margin:10rpx 30rpx;
				line-height: 70rpx;
				padding-bottom:20rpx ;
				border-bottom: 1rpx solid #eee;
				&-name{
					display: flex;
					align-items: center;
					font-weight: 700;
					.viewOrientation{
						display: flex;
						align-items: center;
						&-cancel{
							&-text{
								font-weight: 400;
								font-size: 24rpx;
								color: #797979;
								border-radius: 30rpx;
								border: 1rpx solid #797979;
								padding: 8rpx 20rpx;
							}
						}
					}
					&-index{
						margin-right: 15rpx;
						&-number{
							width: 50rpx;
							height: 50rpx;
							border-radius: 30rpx;
							color: #409eff;
							background-color: #e1effd;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}					
				}
				&-content{
					display: flex;
					margin-left: 15rpx;
					font-size: 28rpx;
					&-outcome{
						color: #bdaba8;
						margin: 0 15rpx;
					}
					.uni-list-cell{
						display: flex;
					}
				}
			}
		}
		
		
		// 目标人员
		.staffList{
			margin-top: 15rpx;
			&-item{
				padding: 0 45rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				&-info{
					display: flex;
					align-items: center;
					&-surname{
						margin-right: 20rpx;
						width: 90rpx;
						height: 90rpx;
						border-radius: 45rpx;
						background-color: #f6c255;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 38rpx;						
					}
					&-name{
						font-weight: 700;
					}
				}
				&-concern{
					width: 160rpx;
					
				}
			}
			&-selectedStaff{
				    position: fixed;
				    bottom: 0;
				    padding: 30rpx;
				    width: 100%;
				    box-sizing: border-box;
					color: #409eff;
					box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.08);
			}
		}
		
		// 已添加人员
		.addStaffListBox{
			&-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #eeeeee;
			}
		}		
		
		
		
		// 关联
		.contextual{
			&-select{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-text,&-active{
					font-weight: 700;
					height: 80rpx;
					background-color: #fbfbfb;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&-active{
					color: #398ef4;
					border-bottom: 6rpx solid #398ef4;
				}
			}
			&-input{
				margin: 20rpx 30rpx;
				input{
					background: #eee;
					padding: 16rpx 30rpx;
					border-radius: 40rpx;    
				}
			}
			&-taskList{
				padding-bottom: 100rpx;
				&-item{
					border-bottom: 1rpx solid #f2f2f2;
					padding:30rpx;
					line-height: 60rpx;
					&-taskName{
						display: flex;
						justify-content: space-between;
						&-left{
							display: flex;
							align-items: center;
							&-tag{
								margin: 0 20rpx;
								background: #f5f5f5;
								padding: 0 15rpx;
								font-size: 22rpx;
								border-radius: 8rpx;    
							}
							&-text{
								max-width: 400rpx;
							    overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}	
						}
						&-right{
							&-status{
								padding: 0 10rpx;
								font-size: 24rpx;
								border-radius: 10rpx;   
								background: #eee;
								border: 1rpx solid #c9c9c9;
							}
							.finish{
								color: #4c9f6a;
								background: #eef9f4;
								border: 1rpx solid #a2dabf;
							}
							.underway{ // 进行中
								color: #64a5f7;
								background: #eef5fe;
								border: 1rpx solid #b9d7fb;
							}
							.suspend{ // 暂停
								color: #e07a41;
								background: #fbf2eb;
								border: 1rpx solid #edba99;
							}
							.accomplishSubmission{  // 完成提报中
								color: #4f99b0;
								background: #eaf6f9;
								border: 1rpx solid #95d5e8;
							}
							
							.abnormalSubmission{ // 异常提报中
								color: #d35055;
								background: #f5e7e7;
								border: 1rpx solid #ecb5b4;
							}
						}
					}
					&-principal{
						display: flex;
						margin: 30rpx 0 10rpx 72rpx;
						view{
							background: #f5f5f5;
							padding: 0 15rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
						}
					}
				}
				&-btn{
					width: 100%;
					position: fixed;
					left: 0;
					bottom: 20rpx;
					&-confirm{
						margin: 0 20rpx;
						background-color: #388ff8;
					}
				}
			}
		}
		
		
		// 更新成果完成度
		.createTarget-select{
			&-item{
				padding: 30rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #dee1e8;
				&-status{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
				.placeholder{
					color:	#9196a4;
				}
				&-finishInput{
					width: 200rpx;
					display: flex;
					align-items: center;
					input{
						text-align: right;
					}
				}
				
			}
			&-input{
				margin: 30rpx;
				font-weight: 700;
				font-size: 32rpx;
				&-textarea{
					padding: 25rpx;
					box-sizing: border-box;    
					background-color: #eee;
					font-size: 26rpx;
					font-weight: 400; 
					width: 100%;
					border-radius: 10rpx; 
				}
			}
		}
		
		
		// 调整权重
		.weightList{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #dee1e8;
				padding:25rpx;
				&-name{
					flex: 5;
					display: flex;
					&-tag{
						width: 100rpx;
						color: #737373;
						font-size: 26rpx; 
					}
				}
				&-ratio{
					flex: 1;
					display: flex;
					align-items: center;
					input{
						border: 1rpx solid #eee;
						text-align: center;
					}
				}
			}
		}
	}
	
</style>
